<template>
  <!-- <div>
    <template>
      <span>{{$route.meta.firstTitle}}</span>&gt;
      <span>{{$route.meta.secondTitle}}</span>
    </template>
    <div>
       <table>
        <thead>
          <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>专业</td>
            <td>班级</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in students" :key="item._id">
            <td>{{item._id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.subjectsId?item.subjectsId.name:'无'}}</td>
            <td>{{item.classesId?item.classesId.name:'无'}}</td>
            <td>
              <button @click="goUpdateStudent(item._id)">修改</button>
              <button @click="goDetailStudent(item._id)">查看</button>
            </td>
          </tr>
        </tbody>
       </table>
    </div>
  </div> -->
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>{{ $route.meta.firstTitle }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $route.meta.secondTitle }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-table
      :data="students"
      style="width: 100%"
      :row-key="row=>row._id"
    >
      <el-table-column prop="_id" label="编号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="subjectsId.name" label="专业"></el-table-column>
      <el-table-column prop="classesId.name" label="班级"></el-table-column>
      <el-table-column prop="image" label="头像">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.image"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="210px">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="editor(scope.row)"
            >查看</el-button
          >
          <el-button size="small">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分页组件 -->
    <el-pagination 
        background 
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5,10,20]"
        :total="total"
        :page-size="queryInfo.pageSize"
        :current-page="queryInfo.currentPage"
        @current-change="handCurrentPage"
        @size-change="handPageSize">
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  name: "StudentList",
  data() {
    return {
      list: [],
      queryInfo:{
        pageSize:5,
        currentPage:1
      },
      total: 0,
    };
  },
  methods: {
    async getAllStudents() {
      const {
        data: { result, total },
      } = await this.$api.students.getStudents(this.queryInfo);
     
      this.list = result;
      this.total = total;
      console.log('total',this.total);
    },
    goUpdateStudent(id) {
      this.$router.push({
        path: `/home/studentUpdate/${id}`,
      });
    },
    goDetailStudent(id) {
      // this.$router.push({
      //   path:`/home/studentsDetail?id=${id}`
      // })
      this.$router.replace({
        path: "/home/studentsDetail",
        query: {
          id,
        },
      });
    },
    handCurrentPage(cp){
      this.queryInfo.currentPage=cp
      this.getAllStudents()
    },
    handPageSize(ps){
      this.queryInfo.pageSize=ps
      this.getAllStudents()
    }
    
  },
  computed: {
    students() {
      return this.list.filter((item) => item.name);
    },
  },
  created() {
    this.getAllStudents();
  },
};
</script>

<style>
</style>